<template>
  <div>
    <div>总计：{{ count }}</div>
    <div v-for="(item, index) in data01" :key="index">
      <div class="parent">
        <span class="name">{{ item.name }}</span>
        <span class="age">{{ item.age }}</span>
      </div>
      <div class="child" v-for="(inItem, inIndex) in item.children">
        <span class="name">{{ inItem.name }}</span>
        <span class="age">{{ inItem.age }}</span>
      </div>
    </div>
    <children :data="count"></children>
  </div>
</template>

<script setup name="monitoring">
  import { reactive, shallowRef, isReactive, ref, watch, watchEffect, onMounted } from 'vue';
  import children from './components/children.vue';

  const count = ref([
    { name: '张三之子', age: 10 },
    { name: '张三之女', age: 10 }
  ]);
  let data01 = reactive({
    one: { name: '张三', age: 38, children: [{ name: '张三之子', age: 10 }] },
    two: { name: '李四', age: 35, children: [{ name: '李四之子', age: 6 }] }
  });

  watch(count, (newValue, oldValue) => {
    console.log('~~parent watch监听 ~~');
    console.log(newValue, oldValue);
  });
  onMounted(() => {
    setTimeout(() => {
      count.value.push({ name: 'hha' });
    }, 1e3);
  });
</script>

<style lang="scss" scoped></style>
